<script lang="ts" setup>
import { computed, ref, watch } from "vue";
import { BuildTaskRecord, BuildTaskResult, WsMsgType } from "../model";
import { getTaskDetail } from "../api/task";
import TaskDetailChart from "./TaskDetailChart/index.vue";
import { dayjs, ElMessage } from "element-plus";
import { useTypeListStore } from "../store/typeListStore";
import { useWs } from "../utils/ws";
const props = defineProps<{
  task?: Partial<BuildTaskRecord>;
}>();

const taskDetail = ref<BuildTaskRecord | null>();
const loading = ref(false);
const { getTypeName } = useTypeListStore();
const refreshTaskDetail = () => {
  if (loading.value) return;
  loading.value = true;
  getTaskDetail(props.task?.taskId || "")
    .then((res) => {
      taskDetail.value = res;
    })
    .catch((e) => {
      console.error(e);
      ElMessage.error("详情查询失败");
    })
    .finally(() => {
      loading.value = false;
    });
};

const statusText = computed(() => {
  switch (taskDetail.value?.status) {
    case "finish":
      return "已完成";
    case "pending":
      return "等待中";
    case "running":
      return "运行中";
    default:
      return "--";
  }
});

useWs(WsMsgType.TASK_RESULT_UPDATE, (data: BuildTaskResult) => {
  if (taskDetail.value?.taskId === data.taskId) {
    // 更新
    refreshTaskDetail();
  }
});

watch(
  () => [props.task?.taskId, props.task?.status],
  (v) => {
    if (v[0]) refreshTaskDetail();
  },
  { immediate: true }
);
</script>

<template>
  <div class="content">
    <el-empty v-if="!task" description="暂未选择任务" />
    <div class="detail-wrap" v-else>
      <div class="detail">
        <el-descriptions label :column="3" :border="true" :size="'small'">
          <el-descriptions-item>
            <template #label>
              <div class="cell-label">任务名称</div>
            </template>
            <span class="cell-text"> {{ taskDetail?.taskTitle }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-label">任务描述</div>
            </template>
            <span class="cell-text"> {{ taskDetail?.taskDesc }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-label">任务ID</div>
            </template>
            <span class="cell-text"> {{ taskDetail?.taskId }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-label">当前状态</div>
            </template>
            <span class="cell-text"> {{ statusText }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-label">创建时间</div>
            </template>
            <span class="cell-text">
              {{
                taskDetail?.createTime
                  ? dayjs(taskDetail?.createTime).format("YYYY-MM-DD HH:mm:ss")
                  : "--"
              }}</span
            >
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-label">开始时间</div>
            </template>
            <span class="cell-text">
              {{
                taskDetail?.startTime
                  ? dayjs(taskDetail?.startTime).format("YYYY-MM-DD HH:mm:ss")
                  : "--"
              }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-label">结束时间</div>
            </template>
            <span class="cell-text">
              {{
                taskDetail?.endTime
                  ? dayjs(taskDetail?.endTime).format("YYYY-MM-DD HH:mm:ss")
                  : "--"
              }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-label">子任务数</div>
            </template>
            <span class="cell-text">{{ taskDetail?.total || 0 }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-label">当前剩余</div>
            </template>
            <span class="cell-text"> {{ taskDetail?.rest || 0 }}</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-label">子任务</div>
            </template>
            <el-table  max-height="250px" :data="taskDetail?.taskList || []" :size="'small'">
              <el-table-column label="任务类型" prop="type" min-width="160px">
                <template #default="{ row }">
                  {{ getTypeName(row.type) }}
                </template>
              </el-table-column>
              <el-table-column label="总数/次" prop="total"> </el-table-column>
              <el-table-column label="成功/次" prop="suc"> </el-table-column>
              <el-table-column label="失败/次" prop="fail"> </el-table-column>
              <el-table-column label="剩余/次" prop="rest"> </el-table-column>
            </el-table>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <TaskDetailChart :task="taskDetail" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  min-width: 480px;
  height: 100%;
  flex: 1;

  .detail-wrap {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    .detail {
      flex: 0 0 auto;
      margin-bottom: 16px;
      .cell-label {
        display: inline-flex;
        min-width: 50px;
      }
      .cell-text {
        display: inline-flex;
        max-width: 150px;
        word-break: break-all;
      }
    }
  }
}
</style>
